<template>
    <div class="dashboard">
        <a-row :gutter="16" class="panels">
    <a-col class="gutter-row" :span="12" :lg="6">
      <Panel color="#01a1ff" title="产品管理" :num="nums.pro">
       <proSvg />
     </Panel>
     


    
    </a-col>
    <a-col class="gutter-row"  :span="12" :lg="6">
        <Panel  color="#01ffa1" title="banner 管理" :num="nums.banner">
         <aboutSvg />
        </Panel>
    </a-col>
    <a-col class="gutter-row"  :span="12" :lg="6">
        <Panel  color="#01a1aa" title="关于我们" :num="nums.about"/>
    </a-col>
    <a-col class="gutter-row"  :span="12" :lg="6">
        <Panel  color="#ff01a1" title="用户" :num="nums.users"/>
    </a-col>
  </a-row>
  <!-- <hr /> -->
       <EchartsLine /> 
       <a-row>
        <a-col :span="12">
             <EchartsLinetow/> 
        </a-col>
        <a-col  :span="12">
             <EchartsLine/> 
        </a-col>
       </a-row>
    </div>
</template>
<script setup>
import Panel from "../../../components/panel.vue";
import * as countsApi from "../../../api/dashboard";
import EchartsLine  from "./echartsLine.vue";
import EchartsLinetow from "./echartsLine copy.vue";
import proSvg from "../../../assets/svg/pro.svg";
import aboutSvg from "../../../assets/svg/about.svg";

const keys = Object.keys(countsApi).map((item)=>
    item.slice(3,item.length - 6).toLowerCase()
)
const nums = ref({});
const getCountApi = ()=>{
    const arr = Object.values(countsApi);
    return Promise.all(arr.map((item)=>item()));
};
getCountApi().then((res)=>{
    console.log(res);
    const obj = {};
    keys.forEach((item,index)=>{
        obj[item] = res[index];
    })
    
    nums.value = obj;
    console.log(obj);
});
</script>
<style scoped>
.panels{
    padding: 20px;
}
.dashboard{
    background-color: #d6d3d3;
}
.gutter-row{
    margin: 10px 0;
}
</style>